<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: #ccc;
        }
    </style>
    <script>
        window.onload = function(){
            let hello = document.getElementById('hello')
            // 鼠标移入移出
            hello.onmouseover = function(){
                console.log(111)
            }
            hello.onmouseout = function(){
                console.log(222)
            }

            var username = document.getElementById('username')
            // 键盘事件
            // username.onkeydown = function(){
            //     console.log(333)
            // }
            username.onkeypress = function(event){
                // console.log(event)
                if(event.keyCode == 13){
                    console.log('按了回车。。。。')
                }
            }
            // username.onkeyup = function(){
            //     console.log(555)
            // }

            // 获取焦点和失去焦点事件
            username.onfocus = function(){
                this.style.background = 'pink'
            }
            username.onblur = function() {
                this.style.background = 'white'

            }


            document.getElementById('agree').onchange = function(){
                console.log(this.checked) // true表示选中，false表示没有选中
            }
        }
    </script>
</head>
<body>
    <div id="hello">Web前端</div>

    用户名：<input type="text" id="username"> <br>

    同意协议：<input type="checkbox" id="agree">
</body>
</html>